<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head th:replace="layout/header :: header(title=角色管理)">
<body class="gray-bg">
	<div id="roles">
		<div v-show="showList" class="row wrapper wrapper-content animated fadeInRight">
			<div class="col-sm-12">
				<div class="ibox">
					<div class="ibox-title">
						<h5>角色管理</h5>
					</div>
					<div class="ibox-content">
							<div sec:authorize="hasAuthority('admin_role_list')" class="col-sm-2">
								<input type="text" class="form-control" id="roleName" @keyup.enter="query" placeholder="角色名称">
							</div>							
							<a sec:authorize="hasAuthority('admin_role_list')" id="query" class="btn btn-info" @click="query"><i class="fa fa-search"></i>&nbsp;&nbsp;查询</a>&nbsp;&nbsp;
							<a sec:authorize="hasAuthority('admin_role_save')" id= "add" class="btn btn-primary" @click="add"><i class="fa fa-plus"></i>&nbsp;&nbsp;新增</a>&nbsp;&nbsp;
							<a sec:authorize="hasAuthority('admin_role_grant')" id= "grant" class="btn btn-primary" @click="grant"><i class="fa fa-arrows"></i>&nbsp;&nbsp;分配资源</a>&nbsp;&nbsp;
							<a sec:authorize="hasAuthority('admin_role_update')" class="btn btn-primary" @click="update"><i class="fa fa-pencil-square-o"></i>&nbsp;&nbsp;修改</a>&nbsp;&nbsp;
							<a sec:authorize="hasAuthority('admin_role_delete')" class="btn btn-danger" @click="del"><i class="fa fa-trash-o"></i>&nbsp;&nbsp;删除</a>							
						<br>
						<br>
						<div class="row row-lg">
							<div class="col-sm-12">
								<div class="table-responsive">
									<table id="infoList" ></table>			
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>			
		</div>
		
		<div v-show="!showList" class="wrapper wrapper-content animated fadeInRight">
			<div class="row col-sm-6 col-sm-offset-3">
				<div class="ibox">
					<div class="ibox-title">
						<h5>{{title}}</h5>
					</div>
					<div class="ibox-content">
					<form class="form-horizontal">
						<div class="form-group">
						   	<div class="col-sm-2 control-label">角色标识</div>
						   	<div class="col-sm-10">
						      <input type="text" class="form-control" v-model="role.roleKey" placeholder="角色名称"/>
						    </div>
						</div>
						<div class="form-group">
						   	<div class="col-sm-2 control-label">角色名称</div>
						   	<div class="col-sm-10">
						      <input type="text" class="form-control" v-model="role.roleName" placeholder="角色名称"/>
						    </div>
						</div>
						<div class="form-group">
						   	<div class="col-sm-2 control-label">启用状态</div>
						   	<div class="col-sm-10">
						   		<select v-model="role.status" class="form-control">
                                	<option value="0">正常</option>
                                	<option value="1">禁用</option>
                                </select>
						    </div>
						</div>
						<div class="form-group">
						   	<div class="col-sm-2 control-label">备注</div>
						   	<div class="col-sm-10">
						      <input type="text" class="form-control" v-model="role.description" placeholder="备注"/>
						    </div>
						</div>				
						<div class="form-group">
							<div class="col-sm-2 control-label"></div> 
							<input type="button" class="btn btn-primary" @click="saveOrUpdate" value="确定"/>
							&nbsp;&nbsp;<input type="button" class="btn btn-warning" @click="reload" value="返回"/>
						</div>
					</form>
					</div>
				</div>
			</div>
		</div>
	
	
	<!-- 资源树 -->
	<div id="rescLayer" style="display: none;padding:10px;">
		<ul id="rescTree" class="ztree"></ul>
	</div>
		
	<script th:src="@{/js/admin/sysrole.js}"></script>
	</div>
</body>
</html>